/*
 * COKFOOD 管理员后台全局样式
 * 定义统一的样式规范，确保整体UI一致性和专业感
 */

@import './variables.scss';

// 卡片组件样式
.admin-card {
  background-color: $white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;
  transition: $transition-base;
  border: 1px solid $gray-200;

  &:hover {
    box-shadow: $shadow-lg;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-md;

    h2, h3, h4 {
      margin: 0;
      font-weight: $font-weight-semibold;
      color: $text-primary;
    }
  }

  &__body {
    width: 100%;
  }

  &__footer {
    margin-top: $spacing-md;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

// 按钮样式系统
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border-radius: $border-radius-md;
  font-weight: $font-weight-medium;
  font-size: $font-size-sm;
  cursor: pointer;
  transition: $transition-base;
  border: none;
  outline: none;
  text-decoration: none;
  gap: $spacing-sm;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  // 主按钮
  &--primary {
    background-color: $primary;
    color: $white;

    &:hover, &:focus {
      background-color: $primary-dark;
    }
  }

  // 次要按钮
  &--secondary {
    background-color: $secondary;
    color: $white;

    &:hover, &:focus {
      background-color: $secondary-dark;
    }
  }

  // 成功按钮
  &--success {
    background-color: $success;
    color: $white;

    &:hover, &:focus {
      background-color: darken($success, 5%);
    }
  }

  // 警告按钮
  &--warning {
    background-color: $warning;
    color: $white;

    &:hover, &:focus {
      background-color: darken($warning, 5%);
    }
  }

  // 危险按钮
  &--danger {
    background-color: $danger;
    color: $white;

    &:hover, &:focus {
      background-color: darken($danger, 5%);
    }
  }

  // 信息按钮
  &--info {
    background-color: $info;
    color: $white;

    &:hover, &:focus {
      background-color: darken($info, 5%);
    }
  }

  // 轮廓按钮变体
  &--outline {
    background-color: transparent;

    &.admin-btn--primary {
      color: $primary;
      border: 1px solid $primary;

      &:hover, &:focus {
        background-color: rgba($primary, 0.1);
      }
    }

    &.admin-btn--secondary {
      color: $secondary;
      border: 1px solid $secondary;

      &:hover, &:focus {
        background-color: rgba($secondary, 0.1);
      }
    }

    &.admin-btn--success {
      color: $success;
      border: 1px solid $success;

      &:hover, &:focus {
        background-color: rgba($success, 0.1);
      }
    }

    &.admin-btn--warning {
      color: $warning;
      border: 1px solid $warning;

      &:hover, &:focus {
        background-color: rgba($warning, 0.1);
      }
    }

    &.admin-btn--danger {
      color: $danger;
      border: 1px solid $danger;

      &:hover, &:focus {
        background-color: rgba($danger, 0.1);
      }
    }

    &.admin-btn--info {
      color: $info;
      border: 1px solid $info;

      &:hover, &:focus {
        background-color: rgba($info, 0.1);
      }
    }
  }

  // 文本按钮
  &--text {
    background-color: transparent;
    padding: $spacing-xs $spacing-sm;

    &.admin-btn--primary {
      color: $primary;

      &:hover, &:focus {
        background-color: rgba($primary, 0.1);
      }
    }

    &.admin-btn--secondary {
      color: $secondary;

      &:hover, &:focus {
        background-color: rgba($secondary, 0.1);
      }
    }

    &.admin-btn--success {
      color: $success;

      &:hover, &:focus {
        background-color: rgba($success, 0.1);
      }
    }

    &.admin-btn--warning {
      color: $warning;

      &:hover, &:focus {
        background-color: rgba($warning, 0.1);
      }
    }

    &.admin-btn--danger {
      color: $danger;

      &:hover, &:focus {
        background-color: rgba($danger, 0.1);
      }
    }

    &.admin-btn--info {
      color: $info;

      &:hover, &:focus {
        background-color: rgba($info, 0.1);
      }
    }
  }

  // 尺寸变体
  &--xs {
    padding: $spacing-xs * 0.75 $spacing-sm;
    font-size: $font-size-xxs;
  }

  &--sm {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-xs;
  }

  &--lg {
    padding: $spacing-sm $spacing-lg;
    font-size: $font-size-md;
  }

  &--block {
    display: flex;
    width: 100%;
  }

  // 带图标按钮
  i, .icon {
    font-size: 1em;
  }
}

// 表单元素样式
.admin-form {
  margin-bottom: $spacing-lg;

  &__group {
    margin-bottom: $spacing-md;
  }

  &__label {
    display: block;
    margin-bottom: $spacing-xs;
    color: $text-primary;
    font-weight: $font-weight-medium;
    font-size: $font-size-sm;
  }

  &__input,
  &__select,
  &__textarea {
    width: 100%;
    padding: $spacing-sm;
    border: 1px solid $gray-300;
    border-radius: $border-radius-md;
    font-size: $font-size-sm;
    transition: border-color $transition-base;
    background-color: $white;

    &:focus {
      outline: none;
      border-color: $primary;
      box-shadow: 0 0 0 2px rgba($primary, 0.2);
    }

    &:disabled {
      background-color: $gray-100;
      cursor: not-allowed;
    }

    &.is-invalid {
      border-color: $danger;

      &:focus {
        box-shadow: 0 0 0 2px rgba($danger, 0.2);
      }
    }
  }

  &__textarea {
    min-height: 100px;
    resize: vertical;
  }

  &__select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right $spacing-sm center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5em;
  }

  &__help-text {
    display: block;
    margin-top: $spacing-xs;
    color: $text-tertiary;
    font-size: $font-size-xs;
  }

  &__error {
    display: block;
    margin-top: $spacing-xs;
    color: $danger;
    font-size: $font-size-xs;
  }

  // 复选框和单选框
  &__checkbox,
  &__radio {
    display: flex;
    align-items: center;
    margin-bottom: $spacing-sm;

    input[type="checkbox"],
    input[type="radio"] {
      margin-right: $spacing-sm;
      cursor: pointer;

      &:focus {
        outline: 2px solid rgba($primary, 0.2);
        outline-offset: 2px;
      }
    }

    label {
      cursor: pointer;
      user-select: none;
    }
  }

  // 开关
  &__switch {
    position: relative;
    display: inline-flex;
    align-items: center;

    input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;

      &:checked + .switch-slider {
        background-color: $primary;

        &:before {
          transform: translateX(18px);
        }
      }

      &:focus + .switch-slider {
        box-shadow: 0 0 0 2px rgba($primary, 0.2);
      }

      &:disabled + .switch-slider {
        background-color: $gray-300;
        cursor: not-allowed;

        &:before {
          background-color: $gray-400;
        }
      }
    }

    .switch-slider {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
      background-color: $gray-400;
      border-radius: 22px;
      transition: $transition-base;
      cursor: pointer;

      &:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: $white;
        border-radius: 50%;
        transition: $transition-base;
      }
    }

    .switch-label {
      margin-left: $spacing-sm;
      cursor: pointer;
      user-select: none;
    }
  }

  // 滑块
  &__slider {
    width: 100%;
    margin: $spacing-md 0;

    input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      border-radius: $border-radius-full;
      background-color: $gray-300;
      outline: none;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: $primary;
        cursor: pointer;
        transition: $transition-base;

        &:hover {
          background-color: $primary-dark;
          transform: scale(1.1);
        }
      }

      &::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: none;
        border-radius: 50%;
        background-color: $primary;
        cursor: pointer;
        transition: $transition-base;

        &:hover {
          background-color: $primary-dark;
          transform: scale(1.1);
        }
      }

      &:focus {
        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px rgba($primary, 0.2);
        }

        &::-moz-range-thumb {
          box-shadow: 0 0 0 3px rgba($primary, 0.2);
        }
      }
    }
  }
}

// 表格样式
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: $spacing-lg;

  &__header {
    background-color: $gray-100;

    th {
      padding: $spacing-sm $spacing-md;
      text-align: left;
      font-weight: $font-weight-semibold;
      color: $text-primary;
      border-bottom: 2px solid $gray-300;
      white-space: nowrap;

      &.sortable {
        cursor: pointer;
        user-select: none;

        &:hover {
          background-color: $gray-200;
        }

        .sort-icon {
          margin-left: $spacing-xs;
          opacity: 0.5;

          &.active {
            opacity: 1;
          }
        }
      }
    }
  }

  &__row {
    transition: $transition-base;

    &:nth-child(even) {
      background-color: $gray-50;
    }

    &:hover {
      background-color: rgba($primary, 0.05);
    }

    td {
      padding: $spacing-sm $spacing-md;
      border-bottom: 1px solid $gray-200;
      color: $text-secondary;

      .actions {
        display: flex;
        gap: $spacing-sm;
        justify-content: flex-end;
      }
    }
  }

  @media (max-width: $breakpoint-md) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

// 分页组件样式
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $spacing-sm;
  margin: $spacing-lg 0;

  &__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: $border-radius-md;
    background-color: $white;
    border: 1px solid $gray-300;
    color: $text-secondary;
    transition: $transition-base;
    cursor: pointer;

    &:hover {
      background-color: $gray-100;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: $gray-100;
    }

    &.active {
      background-color: $primary;
      color: $white;
      border-color: $primary;

      &:hover {
        background-color: $primary-dark;
      }
    }
  }

  &__info {
    color: $text-secondary;
    font-size: $font-size-sm;
    margin: 0 $spacing-md;
  }
}

// 排版规范
.admin-heading {
  color: $text-primary;
  margin-bottom: $spacing-md;
  font-weight: $font-weight-semibold;

  &--1 {
    font-size: $font-size-2xl;
  }

  &--2 {
    font-size: $font-size-xl;
  }

  &--3 {
    font-size: $font-size-lg;
  }

  &--4 {
    font-size: $font-size-md;
  }
}

.admin-text {
  color: $text-secondary;
  margin-bottom: $spacing-md;
  line-height: $line-height-normal;

  &--xs {
    font-size: $font-size-xs;
  }

  &--sm {
    font-size: $font-size-sm;
  }

  &--md {
    font-size: $font-size-md;
  }

  &--lg {
    font-size: $font-size-lg;
  }

  &--muted {
    color: $text-tertiary;
  }

  &--primary {
    color: $primary;
  }

  &--success {
    color: $success;
  }

  &--warning {
    color: $warning;
  }

  &--danger {
    color: $danger;
  }

  &--info {
    color: $info;
  }
}

// 工具类
.admin-flex {
  display: flex;

  &--center {
    justify-content: center;
    align-items: center;
  }

  &--between {
    justify-content: space-between;
    align-items: center;
  }

  &--end {
    justify-content: flex-end;
    align-items: center;
  }

  &--column {
    flex-direction: column;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--gap-sm {
    gap: $spacing-sm;
  }

  &--gap-md {
    gap: $spacing-md;
  }

  &--gap-lg {
    gap: $spacing-lg;
  }
}

.admin-mb {
  &--xs { margin-bottom: $spacing-xs; }
  &--sm { margin-bottom: $spacing-sm; }
  &--md { margin-bottom: $spacing-md; }
  &--lg { margin-bottom: $spacing-lg; }
  &--xl { margin-bottom: $spacing-xl; }
}

.admin-mt {
  &--xs { margin-top: $spacing-xs; }
  &--sm { margin-top: $spacing-sm; }
  &--md { margin-top: $spacing-md; }
  &--lg { margin-top: $spacing-lg; }
  &--xl { margin-top: $spacing-xl; }
}

.admin-mx {
  &--xs { margin-left: $spacing-xs; margin-right: $spacing-xs; }
  &--sm { margin-left: $spacing-sm; margin-right: $spacing-sm; }
  &--md { margin-left: $spacing-md; margin-right: $spacing-md; }
  &--lg { margin-left: $spacing-lg; margin-right: $spacing-lg; }
  &--xl { margin-left: $spacing-xl; margin-right: $spacing-xl; }
}

.admin-my {
  &--xs { margin-top: $spacing-xs; margin-bottom: $spacing-xs; }
  &--sm { margin-top: $spacing-sm; margin-bottom: $spacing-sm; }
  &--md { margin-top: $spacing-md; margin-bottom: $spacing-md; }
  &--lg { margin-top: $spacing-lg; margin-bottom: $spacing-lg; }
  &--xl { margin-top: $spacing-xl; margin-bottom: $spacing-xl; }
}

.admin-p {
  &--xs { padding: $spacing-xs; }
  &--sm { padding: $spacing-sm; }
  &--md { padding: $spacing-md; }
  &--lg { padding: $spacing-lg; }
  &--xl { padding: $spacing-xl; }
}
